<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 1,什么时候使用分支结构 
			需求:>=90分 展现优秀
			>=80分 良好
			>=70分 中等
			>=60分 及格
			<60分 再接再厉 
			语法:
			1.v-if 如果满足条件则展现后续内容
			2.v-else-if 除了if之外的其他的可能
			3.v-else 上述条件都不满足时,展现如下内容
			要求:手动录成绩
			-->
			<h1>考试成绩</h1>
			录入成绩<input type="text" v-model="score" />
			<div v-if="score>=90"> 优秀 </div>
			<div v-else-if="score>=80"> 良好 </div>
			<div v-else-if="score>=70"> 中等 </div>
			<div v-else-if="score>=60"> 及格 </div>
			<div v-else> 你是最棒的 </div>
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					score: ''
				},
				methods: {
				
				}
			})
		</script>
	</body>
</html>
